<template>
    <div class="follow-list">
        <div class="list">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <van-cell
                    v-for="(item, index) in value"
                    :key="index"
                    class="fans-wrap"
                >
                    <van-image
                        class="avatar"
                        slot="icon"
                        fit="cover"
                        round
                        :src="item.photo"
                    />
                    <div slot="title" class="title-wrap">
                        <div>
                            <div class="name">{{ item.name }}</div>
                            <div class="fans">
                                粉丝数: {{ item.fans_count }}
                            </div>
                        </div>
                        <div>
                            <van-button
                                size="small"
                                class="follow-btn"
                                :type="
                                    item.mutual_follow ? 'default' : 'primary'
                                "
                                @click="followBtn(item)"
                                :loading="isFollowedLoading"
                            >
                                {{ item.mutual_follow ? '互相关注' : '关注' }}
                            </van-button>
                        </div>
                    </div>
                </van-cell>
            </van-list>
        </div>
    </div>
</template>

<script>
import { toBeFans, notFans } from '@/api/user'

export default {
    name: 'FollowList',
    components: {},
    props: {
        fn: {
            type: Function,
            required: true
        },
        value: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            list: [],
            loading: false,
            finished: false,
            page: 1,
            perPage: 10,
            // 关注按钮的加载状态
            isFollowedLoading: false
        }
    },
    created () { },
    mounted () { },
    methods: {
        async onLoad () {
            const { data: res } = await this.fn({
                page: this.page,
                per_page: this.perPage
            })
            // console.log(res)
            const { results } = res.data

            this.value.push(...results)
            // 加载状态结束
            this.loading = false

            // 数据全部加载完成
            if (results.length) {
                this.page++
            } else {
                this.finished = true
            }
        },
        // 点击是否关注
        async followBtn (item) {
            // 获取关注或被关注的用户 id
            const userId = item.id.toString()

            this.isFollowedLoading = true

            if (item.mutual_follow) {
                // 已经关注，取消关注
                await notFans(userId)
            } else {
                // 未关注，点击关注
                await toBeFans(userId)
            }
            item.mutual_follow = !item.mutual_follow
            this.isFollowedLoading = false
        }
    },
    computed: {},
    watch: {}
}
</script>

<style scoped>
.follow-list {
    position: fixed;
    left: 0;
    right: 0;
    top: 46px;
    bottom: 0;
    overflow-y: auto;
}
.fans-wrap {
    padding: 15px;
}
.avatar {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
.title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}
.name {
    color: #323233;
    font-size: 14px;
}
.fans {
    color: #999;
    font-size: 12px;
}
.follow-btn {
    width: 66px;
}
</style>
